<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/list.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/jq-paginator.js"></script>
</head>

<body>
<div class="bookContainer">
    <h2>我的购物车</h2>
    <div class="navbar-justify-between">
        <button class="btn btn-outline-info" type="button" onclick="batchNoBuyBook()">批量取消购买</button>
    </div>

    <table>
        <thead>
        <tr>
            <td>选择</td>
            <td class="width100">图书ID</td>
            <td>书名</td>
            <td>作者</td>
            <td>已购数量</td>
            <td>定价</td>
            <td>出版社</td>
            <td>状态</td>
            <td class="width200">操作</td>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <div class="demo">
        <ul id="pageContainer" class="pagination justify-content-center"></ul>
    </div>
    <script>
        getBookList();
        function getBookList() {
            $.ajax({
                url:"/book/getBookInfoListOfNormalUserByPage"+ location.search,
                type: "get",
                success:function(result){
                    if(result.status == "FAIL" || result.status == "UNLOGIN"){
                        location.href = "login_test.html";
                    }

                    var finalHtml="";
                    result = result.data;

                    for(var book of result.bookInfoList){
                        finalHtml += '<tr>'
                        finalHtml += '<td><input type="checkbox" name="selectBook" value="'+book.id+'" class="book-select"></td>'
                        finalHtml += '<td>'+book.id+'</td>'
                        finalHtml += '<td>'+book.bookName+'</td>'
                        finalHtml += '<td>'+book.author+'</td>'
                        finalHtml += '<td>'+book.count+'</td>'
                        finalHtml += '<td>'+book.price+'</td>'
                        finalHtml += '<td>'+book.publish+'</td>'
                        finalHtml += '<td>'+book.statusCN+'</td>'

                        finalHtml += '<td><div class="op d-flex gap-2">';  // 添加间距
                        // 操作按钮使用 button 标签 + Bootstrap 样式
                        finalHtml += '<button type="button" class="btn btn-primary btn-sm" onclick="purchaseBook('+book.id+')">购买</button>';
                        finalHtml += '<button type="button" class="btn btn-danger btn-sm" onclick="cancelPurchase('+book.id+')">取消购买</button>';
                        finalHtml += '</div></td></tr>';

                    }
                    $("tbody").html(finalHtml)

                    // 分页组件保持不变
                    $("#pageContainer").jqPaginator({
                        totalCounts: result.total,
                        pageSize: result.pageRequest.pageSize,
                        visiblePages: 5,
                        currentPage: result.pageRequest.currentPage,
                        first: '<li class="page-item"><a class="page-link">首页</a></li>',
                        prev: '<li class="page-item"><a class="page-link">上一页</a></li>',
                        next: '<li class="page-item"><a class="page-link">下一页</a></li>',
                        last: '<li class="page-item"><a class="page-link">最后一页</a></li>',
                        page: '<li class="page-item"><a class="page-link">{{page}}</a></li>',
                        onPageChange: function (page, type) {
                            if(type=="change"){
                                location.href="book_list_normal.html?currentPage="+page;
                            }
                        }
                    });
                }
            });
        }

        // 购买功能
        function purchaseBook(id) {
            if (confirm("确认再次购买？")) {
                $.ajax({
                    type: "post",
                    url: "/book/buyOfshoppingTrolly",
                    data: {
                        bookId: id
                    },
                    success: function(result) {
                        if(result.status=="SUCCESS"){
                            alert("购买成功！");
                            location.reload();
                        }else{
                            alert("购买失败！");
                            location.reload();
                        }

                    },
                    error: function() {
                        alert("购买失败，请稍后重试");
                    }
                });
            }
        }

        // 取消购买功能
        function cancelPurchase(id) {
            if (confirm("确认取消购买？")) {
                $.ajax({
                    type: "post",
                    url: "/book/noBuyOfNormalUser",
                    data: { bookId: id },
                    success: function(result) {
                        if(result.status=="SUCCESS"){
                            alert("已取消购买");
                            location.reload();
                        }else{
                            alert("取消购买失败");
                            location.reload();
                        }

                    },
                    error: function() {
                        alert("取消失败，请稍后重试");
                    }
                });
            }
        }

        function batchNoBuyBook() {
            var isDelete = confirm("确认批量取消购买?");
            if (isDelete) {
                //获取复选框的id
                var ids = [];
                $("input:checkbox[name='selectBook']:checked").each(function () {
                    ids.push($(this).val());
                });

                //发送请求，批量删除
                $.ajax({
                    type:"post",
                    url:"/book/batchNoBuyBook?idList="+ids,
                    success:function(result){
                        if(result.status=="SUCCESS"){
                            alert("批量取消购买成功！")
                            location.reload();
                        }else{
                            alert("取消购买失败");
                        }
                    },
                    error:function(){
                        console.log("请求失败");
                    }
                });

            }
        }

    </script>
</div>
</body>
</html>